

// function Login() {
//     return (
//       <div >
//           Login
//       </div>
//     );
//   }
  
//   export default Login;


import { Button, Checkbox, Form, Input,message } from 'antd';
import React from 'react';
import {useNavigate} from 'react-router-dom'
import {inject,observer} from 'mobx-react'

function  Login(props){
  const navigate= useNavigate()
  const onFinish = (values) => {
    console.log('Success:', values);
    // 将用户名和密码发送到后台，进行验证
    // 发起请求的操作，mobx中的action中进行
    props.user.login(values).then((data)=>{
        if(data.returnCode===200){
          message.success("登录成功");
          navigate("/index");
        }else{
          message.warning("登录失败");
        }
    }).catch((err)=>{
      message.error("登录出错");
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="userName"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="userPwd"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default inject('user')(observer(Login))
  